<div>
	<form method="post" id="form_${action_id}" name="form_${action_id}">
	<input type="hidden" name="entity.classifyId" value="${classifyId}">
	<div class="easyui-tabs" style="width:auto;height:auto">
		<div title="基本信息" style="padding:10px">
			<table class="form-table" cellpadding=3>
		    	<tr>
		            <td>${action.getDatagridTitle('name')}:</td>
		            <td><input id="entity.name" name="entity.name" type="text" style="width: 300px;"  class="easyui-validatebox" data-options="required:true,validType:'length[1,64]'"   /></td>
		        </tr>
		        <tr>	
					<td>${action.getDatagridTitle('serial')}：</td>
					<td><input id="entity.serial" name="entity.serial" type="text" style="width: 300px;"  class="easyui-validatebox" data-options="required:true,validType:'length[1,64]'"   /></td>
				</tr>
				<tr>	
					<td>${action.getDatagridTitle('price')}：</td>
					<td><input id="entity.price" name="entity.price" type="text" style="width: 300px;"  class="easyui-numberspinner" data-options="required:true,precision:2,min:0,max:999999" /></td>
				</tr>
				<tr>	
					<td>${action.getDatagridTitle('brand')}：</td>
					<td>
		            	<select class="easyui-combobox" name="entity.brand.id" style="width:300px;" data-options="required:true">
		            		<#list brands as brand>
		            		<option value="${brand.id}">${brand.name}</option>
		            		</#list>
		            	</select>
		            </td>
				</tr>
		    </table>
		</div>
		<div title="属性" style="padding:10px">
			<table class="form-table" cellpadding=3>
			<#list attributes as attribute>
    			<#if attribute.type==1><!--TEXT(1) SELECT(2)-->
    				<#if attribute.unit==1><!--NUMBER(1) STRING(2)-->
						<td>${attribute.name}:</td>
			        	<td>
			        		<input name="_product_attribute_${attribute.id}"  class="easyui-numberspinner" data-options="<#if attribute.required==1 >required:true</#if>" style="width:300px;" ></input>
			        	</td>
					<#elseif attribute.unit==2>
						<td>${attribute.name}:</td>
			        	<td>
			        		<input name="_product_attribute_${attribute.id}"  class="easyui-validatebox" data-options="<#if attribute.required==1 >required:true</#if>" style="width:300px;" ></input>
			        	</td>
					</#if>
    			<#elseif attribute.type==2>			
    				<#if attribute.unit==1><!--NUMBER(1) STRING(2)-->
						<td>${attribute.name}:</td>
			        	<td>
			        		<select name="_product_attribute_${attribute.id}"  class="easyui-combobox" data-options="<#if attribute.required==1 >required:true</#if>" style="width:300px;" >
			        			<#list attribute.selectValueList as value>
			        			<option value="${value.key}">${value.value}</option>
			        			</#list>
			        		</select>
			        	</td>
					<#elseif attribute.unit==2>
						<td>${attribute.name}:</td>
			        	<td>
			        		<select name="_product_attribute_${attribute.id}"  class="easyui-combobox" data-options="<#if attribute.required==1 >required:true</#if>" style="width:300px;" >
			        			<#list attribute.selectValueList as value>
			        			<option value="${value.key}">${value.value}</option>
			        			</#list>
			        		</select>
			        	</td>
					</#if>
    			</#if>
    		</#list>
    		</table>
		</div>
		<div title="规格" style="padding:10px">
			<div style="width: 500px; margin:0 auto; padding:20px; border: 1px solid #A3C0E8;">
				<div class="div_contentlist">
				</div>
				<div class="div_contentlist2">
                    <ul style="list-style:none;">
                        <li><div id="createTable"></div></li>
                    </ul>
                    <ul style="list-style:none;"><li><input type="button" id="Button1" class="l-button" value="提交"/></li></ul>
                </div>
			</div>
			<tr id="_product_specifications_sku_${action_id}">
				 
			</tr>
			</table>
		</div>
		<div title="相册" style="padding:10px" id="photo_album_${action_id}">
			<table class="form-table" cellpadding=3>
				<input type="file" id="image_icon_${action_id}" name="uploadify" style="display: none" />
				<tr id="photo_album_tr_1_${action_id}">
					
				</tr>
				<tr id="photo_album_tr_2_${action_id}">
					<td align="left" style="padding-left:25px;" id="photo_album_tr_2_td_${action_id}">
						
					</td>
				</tr>
			</table>
		</div>
	</div>
	</form>
</div>

<script type="text/javascript">
	
	$(function(){
		getImageInfo("");
		uploadify();
		getProductSpecificationsValueDtos();
	});
	function getImageInfo(id){
		$.ajax({
				url : '${request.contextPath}${namespace?default('')}/mp/product/product-getProductImageDto.json',
				data : {
					id : id
				},
				dataType : 'JSON',
				success : function(json) {
					if(json.suc==1){
						if(json.dto.images.length==0){
							append_tr_1("",1)
						}else{
							append_tr_1(json.dto.images[0].icon,1)
						}
						$("#photo_album_tr_1_${action_id}").append(s);
						var s = ""; 
						$("#photo_album_tr_2_td_${action_id}").empty();
						if(json.dto.images.length > 0){
							s = '';
							for(var i=0 ; i<json.dto.images.length;i++){
								s += '<div class="productProgressContainer">'+
										'<div class="productProWrapper">'+
											'<a><img src="${downloadUrl}'+json.dto.images[i].icon+'" width="50" height="50" border="0"></a>'+
											'<input type="hidden" name="picnames" value="'+json.dto.images[i].icon+'">'+	
										'</div>'+
										'<div>'+
											'<a href="javascript:;" class="productDeleteBth">&nbsp;</a>'
										'</div>'+
									'</div>';
							}
						}
						$("#photo_album_tr_2_td_${action_id}").append(s);
					}else if(json.suc==0){
						append_tr_1("",1);
					}
				}
			});
	}
	
	function addImage(){
		$('#image_icon_${action_id}').click();
	}
	
	function uploadify(){
		$("#image_icon_${action_id}").uploadify({
			'swf' : '${request.contextPath}/backstage_res/easyui/js/uploadify/uploadify.swf', //指定上传控件的主体文件，默认‘uploader.swf’ 
	        'uploader' : '${request.contextPath}/upload.do',       //指定服务器端上传处理文件，默认‘upload’ 
	        'folder' : '', //要上传到的服务器路径，默认‘/’
	        'fileObjName'   : '${dirUrl}', //暂时作为路径
	        'buttonText' : '添加图片',
	        'auto' : true,
	        'multi' : false,  //是否允许同时上传多文件，默认false 
	        'fileTypeDesc' : '请选择图片文件（不能超过3M）', //出现在上传对话框中的文件类型描述 
	        'fileTypeExts' : '*.jpg;*.bmp;*.png;*.gif',      //控制可上传文件的扩展名，启用本项时需同时声明fileDesc 
	     	'fileSizeLimit' : 3*1024*1024, //3M
	     	'overrideEvents' : ['onUploadSuccess'],
	     	'onUploadSuccess' : function(file, data, response){
	     		append_tr_1(data,1);
	     		append_tr_2(data);
	     	}
		});
			
	}
	
	function append_tr_1(str,type){
		$("#photo_album_tr_1_${action_id}").empty();
		var s = ""; 
		if(str==""){
			s = '<td>'+
					'<div class="productImgPrivew">'+
						'<p style="margin-top:100px;">此处显示商品页默认图片<br/>您还未上传商品图片</p>'+
					'</div>'+
				'</td>';
		}else{
			if(type==2){
				s = '<td>'+
						'<div class="productImgPrivew">'+
							'<img src="'+str+'" width:"200" height="180" border="0">'+
						'</div>'+
					'</td>';
			}else{
				s = '<td>'+
						'<div class="productImgPrivew">'+
							'<img src="${downloadUrl}'+str+'" width:"200" height="180" border="0">'+
						'</div>'+
					'</td>';
			}
		}
		$("#photo_album_tr_1_${action_id}").append(s);
	}
	
	function append_tr_2(str){
		var s = '<div class="productProgressContainer">'+
					'<div class="productProWrapper">'+
						'<a><img src="${downloadUrl}'+str+'" width:"50px" height="50px" border="0" class="productProWrapper_a" onClick="selectImage(1,this)"></a>'+
						'<input type="hidden" name="picnames" value="'+str+'">'+	
					'</div>'+
					'<div>'+
						'<a href="javascript:;" class="productDeleteBth" onClick="removeImage(this)">&nbsp;</a>'
					'</div>'+
				'</div>';
		$("#photo_album_tr_2_td_${action_id}").append(s);
	}
	
	function selectImage(type,obj){
		var index = $(".productProWrapper_a").index($(obj));
		append_tr_1($(".productProWrapper_a")[index].src,2);
		selectClass(index);
	}
	
	function removeImage(obj){
		var index = $(".productDeleteBth").index($(obj));
		$(".productProgressContainer").eq(index).remove();
		var len = $(".productProgressContainer").length;
		if(len==0){
			append_tr_1("");
		}else{
			if(index==0){
				index = len - 1;
				append_tr_1($(".productProWrapper_a")[index].src,2);
			}else{
				index = index - 1;
				append_tr_1($(".productProWrapper_a")[index].src,2);
			}
		}
		selectClass(index);
	}
	
	function selectClass(index){
		$(".productProWrapper").removeClass('productImageSelected');
		$(".productProWrapper").eq(index).addClass('productImageSelected');
	}
	
	function getProductSpecificationsValueDtos(){
		$.ajax({
			url : '${request.contextPath}${namespace?default('')}/mp/product/product-getProductSpecificationsValueDtos.json',
			data : {
				classifyId : "${classifyId}"
			},
			dataType : 'JSON',
			success : function(json) {
				var s = "";
				for(i=0;i<json.length;i++){
					if(json[i].list.length>0){
						s += '<ul style="list-style:none;" class="Father_Title" ><li>'+json[i].productSpecifications.name+'</li></ul>';
						s += '<ul class="Father_Item'+i+'"style="clear:both; margin-bottom:10px; list-style:none;">';
						for(j=0;j<json[i].list.length;j++){
							s += '<li style="float: left;">'+
								     '<label><input type="checkbox" style="position:relative; top:2px; margin-right:5px;" value="'+json[i].list[j].value+'" />'+json[i].list[j].value+'<span class="li_empty"> </span></label>'+
								  '</li>';
						}
						s += '</ul><br/>';
					}
				}
				$(".div_contentlist").empty();
				$(".div_contentlist").append(s);
				
				addArrayTable();
			}
		});
		
	}
	
	
    function addArrayTable(){
    	//SKU信息
	    $(".div_contentlist label").bind("change", function () {
	        step.Creat_Table();
	    });
    	var step = {
	        //SKU信息组合
	        Creat_Table: function () {
	            step.hebingFunction();
	            var SKUObj = $(".Father_Title");
	            //var skuCount = SKUObj.length;//
	            var arrayTile = new Array();//标题组数
	            var arrayInfor = new Array();//盛放每组选中的CheckBox值的对象
	            var arrayColumn = new Array();//指定列，用来合并哪些列
	            var bCheck = true;//是否全选
	            var columnIndex = 0;
	            $.each(SKUObj, function (i, item){
	                arrayColumn.push(columnIndex);
	                columnIndex++;
	                arrayTile.push(SKUObj.find("li").eq(i).html().replace("：", ""));
	                var itemName = "Father_Item" + i;
	                //选中的CHeckBox取值
	                var order = new Array();
	                $("." + itemName + " input[type=checkbox]:checked").each(function (){
	                    order.push($(this).val());
	                });
	                arrayInfor.push(order);
	                if (order.join() == ""){
	                    bCheck = false;
	                }
	                
	            });
	            //开始创建Table表
	            if (bCheck == true) {
	                var RowsCount = 0;
	                $("#createTable").html("");
	                var table = $("<table id=\"process\" border=\"1\" cellpadding=\"1\" cellspacing=\"0\" style=\"width:100%;padding:5px;\"></table>");
	                table.appendTo($("#createTable"));
	                var thead = $("<thead></thead>");
	                thead.appendTo(table);
	                var trHead = $("<tr></tr>");
	                trHead.appendTo(thead);
	                //创建表头
	                $.each(arrayTile, function (index, item) {
	                    var td = $("<th>" + item + "</th>");
	                    td.appendTo(trHead);
	                });
	                var itemColumHead = $("<th  style=\"width:70px;\">价格</th><th style=\"width:70px;\">库存</th> ");
	                itemColumHead.appendTo(trHead);
	                var tbody = $("<tbody></tbody>");
	                tbody.appendTo(table);
	                ////生成组合
	                var zuheDate = step.doExchange(arrayInfor);
	                if (zuheDate.length > 0) {
	                    //创建行
	                    $.each(zuheDate, function (index, item) {
	                        var td_array = item.split(",");
	                        var tr = $("<tr></tr>");
	                        tr.appendTo(tbody);
	                        $.each(td_array, function (i, values) {
	                            var td = $("<td>" + values + "</td>");
	                            td.appendTo(tr);
	                        });
	                        var td1 = $("<td ><input name=\"Txt_PriceSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");
	                        td1.appendTo(tr);
	                        var td2 = $("<td ><input name=\"Txt_CountSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");
	                        td2.appendTo(tr);
	                    });
	                }
	                //结束创建Table表
	                arrayColumn.pop();//删除数组中最后一项
	                //合并单元格
	               /** $(table).mergeCell({
	                    // 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始
	                    cols: arrayColumn
	                });*/
	            } else{
	                //未全选中,清除表格
	                document.getElementById('createTable').innerHTML="";
	            }
	        },//合并行
	        hebingFunction: function () {
	            $.fn.mergeCell = function (options) {
	                return this.each(function () {
	                    var cols = options.cols;
	                    for (var i = cols.length - 1; cols[i] != undefined; i--) {
	                        // fixbug console调试
	                        // console.debug(cols[i]);
	                        mergeCell($(this), cols[i]);
	                    }
	                    dispose($(this));
	                });
	            };
	            function mergeCell($table, colIndex) {
	                $table.data('col-content', ''); // 存放单元格内容
	                $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
	                $table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
	                $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
	                // 进行"扫面"处理 关键是定位col-td, 和其对应的rowspan
	                $('tbody tr', $table).each(function (index) {
	                    // td:eq中的colIndex即列索引
	                    var $td = $('td:eq(' + colIndex + ')', this);
	                    // 取出单元格的当前内容
	                    var currentContent = $td.html();
	                    // 第一次时走此分支
	                    if ($table.data('col-content') == '') {
	                        $table.data('col-content', currentContent);
	                        $table.data('col-td', $td);
	                    } else {
	                        // 上一行与当前行内容相同
	                        if ($table.data('col-content') == currentContent) {
	                            // 上一行与当前行内容相同则col-rowspan累加, 保存新值
	                            var rowspan = $table.data('col-rowspan') + 1;
	                            $table.data('col-rowspan', rowspan);
	                            // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
	                            $td.hide();
	                            // 最后一行的情况比较特殊一点
	                            // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan
	                            if (++index == $table.data('trNum'))
	                                $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
	                        } else { // 上一行与当前行内容不同
	                            // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理
	                            if ($table.data('col-rowspan') != 1) {
	                                $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
	                            }
	                            // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
	                            $table.data('col-td', $td);
	                            $table.data('col-content', $td.html());
	                            $table.data('col-rowspan', 1);
	                        }
	                    }
	                });
	            }
	            // 同样是个private函数 清理内存之用
	            function dispose($table) {
	                $table.removeData();
	            }
	        },
	        //组合数组
	        doExchange: function (doubleArrays) {
	            var len = doubleArrays.length;
	            if (len >= 2) {
	                var arr1 = doubleArrays[0];
	                var arr2 = doubleArrays[1];
	                var len1 = doubleArrays[0].length;
	                var len2 = doubleArrays[1].length;
	                var newlen = len1 * len2;
	                var temp = new Array(newlen);
	                var index = 0;
	                for (var i = 0; i < len1; i++) {
	                    for (var j = 0; j < len2; j++) {
	                        temp[index] = arr1[i] + "," + arr2[j];
	                        index++;
	                    }
	                }
	                var newArray = new Array(len - 1);
	                newArray[0] = temp;
	                if (len > 2) {
	                    var _count = 1;
	                    for (var i = 2; i < len; i++) {
	                        newArray[_count] = doubleArrays[i];
	                        _count++;
	                    }
	                }
	                //console.log(newArray);
	                return step.doExchange(newArray);
	            }
	            else {
	                return doubleArrays[0];
	            }
	        }
	    }
	    return step;
    }
	
</script>
